// src/components/popups/sponsorTable/companyContactsByCompanyId/ResultTable.tsx

import type { FC } from 'react';
import { type SponsorContactItem } from '@/services/sponsorDashboardService/sponsorContactsBySponsorId';

interface SponsorContactsResultTableProps {
  data: SponsorContactItem[];
}

const ResultTable: FC<SponsorContactsResultTableProps> = ({ data }) => {
  return (
    <div className="w-full overflow-x-auto mt-4 rounded-2xl shadow bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800">
      <table className="min-w-[400px] w-full text-xs sm:text-sm md:text-base rounded-2xl overflow-hidden">
        <thead className="bg-blue-50 dark:bg-slate-800 border-b-2 border-gray-200 dark:border-slate-700 shadow-sm">
          <tr>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Name</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Position</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Phone</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">EC</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">GM</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">KC</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">SS</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">LK</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">INV</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">AA</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">BB</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Mobile</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Fax</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Email</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Website</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Last Updated</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Archive</th>
            <th className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap">Hidden</th>
          </tr>
        </thead>
        <tbody>
          {data.length === 0 ? (
            <tr>
              <td
                colSpan={18}
                className="text-center py-6 text-gray-400 dark:text-gray-500 italic bg-gray-50 dark:bg-slate-900 rounded-b-2xl text-xs sm:text-sm md:text-base"
              >
                No contact records found.
              </td>
            </tr>
          ) : (
            data.map((row) => (
              <tr key={row.sponsor_contact_id} className="hover:bg-blue-50 dark:hover:bg-slate-700 transition text-xs sm:text-sm md:text-base border-b border-gray-100 dark:border-slate-700">
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">
                  {row.title && `${row.title} `}
                  {row.first_name} {row.last_name}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.position_title || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.phone || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.ec || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.gm || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.kc || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.ss || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.lk || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.inv || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.aa || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.bb || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.mobile || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.fax || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.email || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.website || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.last_updated ? new Date(row.last_updated).toLocaleDateString() : '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.archive || '-'}</td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap overflow-hidden text-ellipsis">{row.hidden || '-'}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default ResultTable; 